<template>
  <div class="chart" ref="chart">
  </div>
</template>

<script>
export default {
  name: 'chart',
  mounted() {
    this.init()
  },
  props: {
    title: {
      type: Object
    },
    legend: {
      type: Object,
      default: function () {
        return {
          x: '10',
          y: '160'
        }
      }
    },
    textStyle: {
      type: String,
      default: '#FFF'
    },
    type: {
      type: String,
      default: 'pie'
    },
    chartdata: {
      type: Array
    }
  },
  methods: {
    init() {
      const node = this.$refs.chart
      const chart = this.$echarts.init(node)
      var data = this.chartdata
      var option = {
        legend: {
          x: this.legend.x,
          y: this.legend.y,
          itemWidth: 12,
          itemHeight: 12, //修改icon图形大小
          formatter: function (name) {
            var target;
            var total = 0;
            for (var i = 0, l = data.length; i < l; i++) {
              total += data[i].value;
              if (data[i].name == name) {
                target = data[i].value;
              }
            }
            return ((target / total) * 100).toFixed(1) + '%' + ' ' + ' ' + target + '吨' + ' ' + ' ' + name;
          },
          textStyle: {
            fontSize: 10,
            color: this.textStyle
          },
        },
        color: ['#1abc9c', '#ed7d31', '#a5a5a5', '#ffc000', '#73c0de'],
        tooltip: { trigger: 'item' },
        series: [{
          type: this.type,
          radius: '90%',
          center: ["50%", "30%"],
          label: {
            normal: {
              position: 'inner',
              show: false
            }
          },
          data: this.chartdata
        }],
      }
      chart.setOption(option)
    }
  }
}
</script>

<style scoped>
.chart {
  height: 100%;
  width: 100%;
}
</style>